<template>
  <div>
    <div>
      <a-input class="inputStyle" placeholder="请输入姓名"></a-input>
      <a-input class="inputStyle" placeholder="请输入手机号"></a-input>
      <a-select class="inputStyle" placeholder="请选择状态">
        <a-select-option v-for="item in payType" :key="item.status" :value="item.status">
          {{ item.namse }}
        </a-select-option>
      </a-select>
      <a-button style="margin-right: 10px" type="primary">查询</a-button>
      <a-button>重置</a-button>
    </div>
    <a-table
      bordered
      :rowKey="(record, index) => index"
      :pagination="false"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      :data-source="tableData"
      :columns="columns"
    >
    </a-table>
  </div>
</template>

<script>
import { getPayTypeAPI } from '@/api/product.js'
export default {
  name: 'buyLevelList',
  data() {
    return {
      payType: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '时间',
          dataIndex: 'level',
          align: 'center'
        },
        {
          title: '订单号',
          dataIndex: 'upgrade_money',
          align: 'center'
        },
        {
          title: '金额',
          dataIndex: 'is_show',
          align: 'center',
          scopedSlots: { customRender: 'is_show' }
        },
        {
          title: '状态',
          dataIndex: 'upgrade_desc',
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getPayType()
  },
  methods: {
    async getPayType() {
      const result = await getPayTypeAPI()
      this.payType = result.data
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
</style>
